<template>
    <div class="pop-wrapper">
        <!-- <div v-show="popShow" class="ui first fullscreen basic modal"> -->
        <!-- <div v-show="popShow" class="ui first basic modal"> -->
        <div class="ui basic modal mypop">
            <!--<div class="ui small modal">-->
            <!--<div class="header" v-if="!option.no_header">{{option.header}}</div>-->
            <div class="content">
                <div class="ui message icon" :class='[option.msgType,{above_modal}]'>
                    <i class="icon" :class='option.msgTypeIcon'></i>
                    <div v-if="msgArr" class="ui divided items msgArrList">
                        <div class="item" v-for="msg in msgArr">
                            <div class="content">
                                {{msg}}
                            </div>
                        </div>
                    </div>
                    <span v-else v-html="option.content"></span>
                </div>
            </div>
            <div class="actions" :class="{above_modal}" v-if="!option.no_action">
                <button class="ui negative button">{{option.negative}}</button>
                <button class="ui positive button">{{option.positive}}</button>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import tool from 'src/util/tool';
    import util from '_util/index';

    export default {
        data() {
            return {
                popContentShow: false,
                above_modal: false,
                info: {}
            }
        },
        components: {},
        methods: {
            setPopContent(info) {
                this.popContentShow = true
                this.info = info
            }
        },
        watch: {
            popShow(n, o) {
                // tool.cl(n, o)
                if (n != o) {
                    if (n) {
                        this.above_modal = util.store.get(this, 'in_modal');
                        let _that = this
                        $(this.selector).modal({
                            // blurring: true,
                            duration: 50,
                            allowMultiple: true,
                            onShow: function () {
                                // tool.cl('onshow');

                            },
                            onVisible: function () {
                                // tool.cl('onVisible');
//                                util.store.push(_that, 'set_in_modal', 'in_modal', false, true);
                            },
                            onHide: function () {
                                // tool.cl('onHide');

                            },
                            onHidden: function () {
                                // tool.cl('onHidden');
                                _that.$emit('popHidden')
//                                util.store.push(_that, 'set_in_modal', 'in_modal', false, false);
                                let hide_event = _that.option.hide_event;
                                if (hide_event) {
                                    if (util.isFunction(hide_event)) {
                                        hide_event()
                                    } else {
                                        let eventVue = _that.$store.state.global.eventVue;
                                        eventVue.$emit(hide_event);
                                    }
                                }

                                // that.$parent.popShow = false
                            },
                            onApprove: function () {
                                // tool.cl('onApprove');
                                let yes_event = _that.option.yes_event || _that.yes_event;
                                let delay = _that.option.delay;
                                if (util.isFunction(yes_event)) {
                                    if (delay) {
                                        setTimeout(() => {
                                            yes_event();
                                        }, delay);
                                    } else
                                        yes_event()
                                } else {
                                    let eventVue = _that.$store.state.global.eventVue;
                                    eventVue.$emit(yes_event);
                                }
                            },
                            onDeny: function () {
                                // tool.cl('onDeny');
                                let eventVue = _that.$store.state.global.eventVue;
                                eventVue.$emit(_that.no_event)
                            }
                            //        inverted:true
                        }).modal('show').modal('refresh');
                    } else {
                        $(this.selector).modal('hide');
                    }
                }
            }
        },
        props: {
            popShow: {},
            yes_event: {
                type: String,
                default: 'yes_event'
            },
            no_event: {
                type: String,
                default: 'no_event'
            },
            option: {
                type: Object,
                default: function _default() {
                    return {
                        header: '提示',
                        delay: 0,
                        no_action: false,
                        no_header: false,
                        content: '确认此操作吗？',
                        positive: '确定',
                        negative: '取消',
                    };
                }
            },
        },
        computed: {
            selector() {
                return '.ui.basic.modal.mypop';
            },
            msgArr(){
                let msg = this.option.content;
                if (util.isArray(msg)) {
                    return msg;
                } else
                    return null;
            }
        },
        created() {

        },
        mounted() {

        }
    }
</script>
<style rel="stylesheet/less" lang="less" scoped>@dir: "common/";
.ui.divided.items.msgArrList {
    margin-left: 20px;
    margin-top: 0;
}

.ui.mypop {
    z-index: 1003;
}

.ui.message.icon.above_modal, .actions.above_modal {
    width: 90%;
    margin: 0 auto;
}
</style>